<template>
  <MainContent title="公告管理">
    <template #search-bar>
      <search-bar inline>
        <template #normal>
          <el-form-item label="公告标题">
            <el-input placeholder="公告标题" v-model="searchForm.titel"></el-input>
          </el-form-item>
        </template>
        <template #toolbar>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="addPage" v-has="['170101']">新增公告</el-button>
            <!-- TODO 加权限 -->
            <el-button type="primary" @click="showExportData = true">导出</el-button>
          </el-form-item>
        </template>
      </search-bar>
    </template>

    <layout-table ref="pageListTableRef" url="/merchant/notice/page" :param="searchForm">
      <el-table-column label="公告标题" prop="titel" min-width="180"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime" min-width="180">
        <template #default="scope">
          {{ formatTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="公告状态" prop="status" min-width="120">
        <template #default="scope">
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" @confirm="_changeNoticeStatus(scope.row)"
            :title="scope.row.status ? '确定禁用吗？' : '确定启用吗'">
            <template #reference>
              <el-switch v-model="scope.row.status" :inactive-value="0" :active-value="1" inline-prompt active-text="启用"
                inactive-text="禁用" disabled />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column label="公告链接" prop="dataUrl" min-width="200"></el-table-column>
      <el-table-column label="公告内容" prop="content" min-width="200"></el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="editPage(scope.row)" v-has="['170102']">修改</el-button>
          <el-button link type="danger" @click="_deletePage(scope.row)" v-has="['170103']">删除</el-button>
        </template>
      </el-table-column>
    </layout-table>
    <exportData v-model:show-dialog="showExportData" :search-data="searchForm" title="公告管理" export-type="noticeExport">
    </exportData>
  </MainContent>
  <el-dialog class="dialog-form" v-model="dialogFormVisible" :title="title" width="30%" :before-close="resetForm"
    :close-on-click-modal="false">
    <el-form :model="form" ref="manageForm" :rules="rules" label-width="80px">
      <el-form-item label="公告标题" prop="titel">
        <el-input v-model="form.titel" autocomplete="off" placeholder="公告名称" maxlength="30" show-word-limit />
      </el-form-item>
      <el-form-item label="展示方式">
        <el-radio-group v-model="form.dataway">
          <el-radio :label="1">显示内容</el-radio>
          <el-radio :label="2">链接跳转</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--      <el-form-item label="设为默认">-->
      <!--        <el-radio-group v-model="form.defa">-->
      <!--          <el-radio :label="1">是</el-radio>-->
      <!--          <el-radio :label="0">否</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->
      <el-form-item label="公告链接" v-if="form.dataway == 2">
        <el-input v-model="form.dataUrl" autocomplete="off" placeholder="请输入http或https开头的跳转链接" maxlength="200"
          show-word-limit />
      </el-form-item>
      <el-form-item label="公告内容" v-if="form.dataway == 1">
        <el-input v-model="form.content" autocomplete="off" type="textarea" rows="2" placeholder="请填写公告内容" maxlength="200"
          show-word-limit />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" @click="submitForm(manageForm)">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: "NoticeMng",
};
</script>
<script setup lang="ts">
import { noticeDel, noticeAdd, noticeEdit, changeNoticeStatus } from "@/api/notice";
import LayoutTable from "@/components/table/LayoutTable.vue";
import type { FormInstance } from "element-plus";
import moment from "moment";
import { ElMessage, ElMessageBox } from "element-plus";
import exportData from "@/components/exportData/exportData.vue";
const pageListTableRef = ref<InstanceType<typeof LayoutTable> | null>(null);
const searchForm = reactive({
  titel: "",
  insId: "",
});
let form = ref({
  id: "",
  titel: "",
  dataway: 1,
  defa: 1,
  dataUrl: "",
  content: "",
});
const showExportData = ref(false);
const title = ref();
const dialogFormVisible = ref(false);
const rules = reactive({
  titel: [
    {
      required: true,
      message: "请输入公告标题",
      trigger: "blur",
    },
  ],
});
let edit = ref(false);
const manageForm = ref<FormInstance>();
const addPage = () => {
  title.value = "新建公告";
  edit.value = false;
  dialogFormVisible.value = true;
};
const resetForm = () => {
  form.value = {
    id: "",
    titel: "",
    dataway: 1,
    defa: 1,
    dataUrl: "",
    content: "",
  };
  manageForm.value?.resetFields();
  dialogFormVisible.value = false;
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let rs;
      if (edit.value == true) {
        rs = await noticeEdit(form.value);
      } else {
        delete form.value.id;
        rs = await noticeAdd(form.value);
      }
      if (rs.code == 200) {
        ElMessage({
          type: "success",
          message: edit.value == true ? "编辑成功" : "新建成功",
        });
        resetForm();
        await pageListTableRef.value?.research();
      }
    } else {
      console.log("报错啦！请重新使一下", fields);
    }
  });
};
const editPage = (row: any) => {
  edit.value = true;
  title.value = "编辑公告";
  form.value = row;
  dialogFormVisible.value = true;
};
const _changeNoticeStatus = async (row: any) => {
  const rs = await changeNoticeStatus({ id: row.id });
  if (rs.code === 200) {
    ElMessage.success("设置成功");
    await pageListTableRef.value?.research();
  }
};
const _deletePage = async (row: any) => {
  ElMessageBox.confirm("确认删除吗？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const rs = await noticeDel({ id: row.id });

      if (rs.code === 200) {
        ElMessage.success("删除成功");
        await pageListTableRef.value?.research();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
};
const formatTime = (val: number) => {
  return moment(val).format("YYYY-MM-DD HH:mm:ss");
};

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    // 待完善
    searchForm.insId = insId.value;
  },
  {
    deep: true,
  }
);

//查询按钮查询
const onSearch = async () => {
  await pageListTableRef.value?.research();
};
</script>

<style scoped></style>
